<script setup>
import { ref, reactive, toRefs } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'
import List from '@/components/List/index.vue'

const data = reactive({
    table: false,
    drawer: false,
    dialog: false,
    loading: false,
    active: 0,
    formLabelWidth: '80px',
    timer: null,
    registerNewDeviceForm1: {
        id: '',
        number: 0,
        deviceNumber: '',
        acceptor: '',
        warehouse: '',
        registrationDate: '',
        lifeSpan: '',
        deviceModel: '',
        feeModel: ''
    },
    registerNewDeviceForm2: {
        deviceName: '',
        supplies: '',
        condition: '',
        unit: '',
        serialNumber: '',
        radio: '',
        safetySigns: '',
        antiExplosionLicense: '',
        productionLicense: '',
        fileNumber: '',
        productionDate: '',
        originalPrise: '',
        tax: '',
        depreciationMonthly: ''
    },
    registerNewDeviceForm3: {
        weight: '',
        voltage: '',
        current: '',
        remark: ''
    },
    registerNewDeviceForm4: {
        remark: ''
    } })

const ruleFormRef = ref()

const rules = reactive({
    id: [{ required: true, message: '请输入ID！', trigger: 'blur' },],
})

const next = () => {
    if (active.value < 3) { active.value = active.value + 1 }
}
const before = () => {
    if (active.value > 0) { active.value = active.value - 1 }
    console.log('before', active)
}

const submit = async () => {
    if (!ruleFormRef.value) return
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            return new Promise(resolve => {
                api.post('api/equipment/equipmentUpdate', {
                    id: data.registerNewDeviceForm1.id,
                    code: data.registerNewDeviceForm1.deviceNumber,
                    mId: data.registerNewDeviceForm2.deviceModel,
                    sId: data.registerNewDeviceForm1.supplies,
                    number: data.registerNewDeviceForm1.number,
                    productionLicense: data.registerNewDeviceForm2.productionLicense,
                    explosionProofLicense: data.registerNewDeviceForm2.antiExplosionLicense,
                    fileNo: data.registerNewDeviceForm2.fileNumber,
                    productionDate: data.registerNewDeviceForm2.productionDate,
                    money: data.registerNewDeviceForm2.originalPrise,
                    taxRate: data.registerNewDeviceForm2.tax,
                    monthDepreciation: data.registerNewDeviceForm2.depreciationMonthly,
                    checkerId: data.registerNewDeviceForm1.acceptor,
                    section: data.registerNewDeviceForm1.warehouse,
                    newOld: data.registerNewDeviceForm2.condition,
                    remark: data.registerNewDeviceForm4.remark
                }).then(res => {
                    if (res.c === 2) {
                        ElMessage({
                            message: '更新成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                        
                })
            })
        } else {
            ElMessage({
                type: 'error',
                message: Object.values(fields).map(i => i[0].message).join()
            })
        }
    })
    
}

const {
    table,
    drawer,
    dialog,
    loading,
    active,
    formLabelWidth,
    timer,
    registerNewDeviceForm1,
    registerNewDeviceForm2,
    registerNewDeviceForm3,
    registerNewDeviceForm4
} = toRefs(data)
</script>
<template>
    <div>
        <page-main>
            <List />

            <!-- <el-button type="primary" style="margin-top: 20px;" @click="dialog = true">新设备入库登记</el-button> -->
				
            <!-- <el-drawer
                ref="drawer"   
                v-model="dialog"			
                title="新设备入库"
                direction="rtl"
                custom-class="demo-drawer"
                size="80%"
            > -->
            <el-card style="margin-top: 40px;">
                <div class="drawer__content">
                    <!-- <el-steps :active="active" align-center>
                        <el-step title="步骤1" />
                        <el-step title="步骤2" />
                        <el-step title="步骤3" />
                        <el-step title="步骤4" />
                    </el-steps> -->
                    <!--新设备登记第一步表单1-->
                    <div class="registerForms" style="width: 1000px;margin: 0 auto;padding-top: 80px;padding-bottom: 50px">
                        <el-form :inline="true" ref="ruleFormRef" :rules="rules" :model="registerNewDeviceForm1">
                            <!--第一行-->
                           
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="ID：" prop="id">
                                        <el-input  v-model="registerNewDeviceForm1.id" style="width: 200px" placeholder="输入ID" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="设备编号：">
                                        <el-input  v-model="registerNewDeviceForm1.deviceNumber" style="width: 200px" placeholder="输入编号" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="设备数量：">
                                        <el-input  v-model="registerNewDeviceForm1.number" style="width: 200px" placeholder="输入数量" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="管理库房：">
                                        <el-select v-model="registerNewDeviceForm1.warehouse" style="width: 200px" placeholder="选择库房">
                                            <el-option label="库房A" value="1" />
                                            <el-option label="库房B" value="2" />
                                            <el-option label="库房C" value="3" />
                                            <el-option label="库房D" value="4" />
                                            <el-option label="库房E" value="5" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第二行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="入库日期：">
                                        <el-input  v-model="registerNewDeviceForm1.registrationDate" style="width: 200px" placeholder="输入时间" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="使用年限：">
                                        <el-input  v-model="registerNewDeviceForm1.lifeSpan" style="width: 200px" placeholder="输入时间" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第三行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="设备类型">
                                        <el-select v-model="registerNewDeviceForm1.deviceModel" style="width: 200px" placeholder="选择类型">
                                            <el-option label="O型" value="1" />
                                            <el-option label="A型" value="2" />
                                            <el-option label="B型" value="3" />
                                            <el-option label="AB型" value="4" />
                                            <el-option label="熊猫型" value="5" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="费用类型">
                                        <el-select v-model="registerNewDeviceForm1.feeModel" style="width: 200px" placeholder="选择类型">
                                            <el-option label="O型" value="1" />
                                            <el-option label="A型" value="2" />
                                            <el-option label="B型" value="3" />
                                            <el-option label="AB型" value="4" />
                                            <el-option label="熊猫型" value="5" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <!--第四行-->
                            </el-row>
                            <!--第三行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="验收人">
                                        <el-input  v-model="registerNewDeviceForm1.acceptor" style="width: 200px" placeholder="输入验收人" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
            
                    <!-- <div style="position: absolute;bottom: 60px;right: calc(50% - 250px)">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-button type="primary" disabled @click="before">上一步</el-button>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" @click="next">下一步</el-button>
                            </el-col>
                        </el-row>
                    </div> -->
                    <el-divider />
                    <!--新设备登记第二步表单2-->
                    <div class="registerForms" style="width: 1000px;margin: 0 auto;padding-top: 20px;padding-bottom: 50px">
                        <!--第一行:AI铭牌行-->
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <el-button disabled style="font-size: 20px;margin-bottom: 30px;margin-left: 80px; float: left">AI扫铭牌</el-button>
                            </el-col>
                        </el-row>
                        <el-form :inline="true" :model="registerNewDeviceForm2">
                            <!--第二行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="设备名称：">
                                        <el-input  v-model="registerNewDeviceForm1.deviceName" style="width: 200px" placeholder="输入名称" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="供应商ID：">
                                        <el-input  v-model="registerNewDeviceForm1.supplies" style="width: 200px" placeholder="输入供应商" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第二行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="设备型号ID：">
                                        <el-input  v-model="registerNewDeviceForm2.deviceModel" style="width: 200px" placeholder="输入型号" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="新旧程度：">
                                        <el-select v-model="registerNewDeviceForm2.condition" style="width: 100px" placeholder="请选择">
                                            <el-option label="全新" value="1" />
                                            <el-option label="9成新" value="2" />
                                            <el-option label="8成新" value="3" />
                                            <el-option label="5成新" value="4" />
                                            <el-option label="功能还在" value="5" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="单位：">
                                        <el-select v-model="registerNewDeviceForm2.unit" style="width: 100px" placeholder="请选择">
                                            <el-option label="千克" value="1" />
                                            <el-option label="吨" value="2" />
                                            <el-option label="米" value="3" />
                                            <el-option label="千米" value="4" />
                                            <el-option label="条" value="5" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第三行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="出厂编号：">
                                        <el-input  v-model="registerNewDeviceForm2.serialNumber" style="width: 200px" placeholder="输入编号" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="是否防爆：">
                                        <el-radio v-model="registerNewDeviceForm2.radio" label="1">是</el-radio>
                                        <el-radio v-model="registerNewDeviceForm2.radio" label="2">否</el-radio>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第四行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="安全标志：">
                                        <el-input  v-model="registerNewDeviceForm2.safetySigns" style="width: 200px" placeholder="输入安全标志" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="防爆许可证：">
                                        <el-input  v-model="registerNewDeviceForm2.antiExplosionLicense" style="width: 200px" placeholder="输入安全标志" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第五行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="生产许可证：">
                                        <el-input  v-model="registerNewDeviceForm2.productionLicense" style="width: 200px" placeholder="输入生产许可证" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="档案编号：">
                                        <el-input  v-model="registerNewDeviceForm2.fileNumber" style="width: 200px" placeholder="输入档案编号" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第六行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="生产日期：">
                                        <el-input  v-model="registerNewDeviceForm2.productionDate" style="width: 200px" placeholder="输入生产日期" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="原定金额：">
                                        <el-input  v-model="registerNewDeviceForm2.originalPrise" style="width: 200px" placeholder="输入原定金额" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第七行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="税率：">
                                        <el-select v-model="registerNewDeviceForm2.tax" style="width: 200px" placeholder="请选择">
                                            <el-option label="0%" value="1" />
                                            <el-option label="1%" value="2" />
                                            <el-option label="5%" value="3" />
                                            <el-option label="17%" value="4" />
                                            <el-option label="40%" value="5" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="月折旧：">
                                        <el-input  v-model="registerNewDeviceForm2.depreciationMonthly" style="width: 200px" placeholder="输入折旧率" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
            
                        <!-- <div style="position: absolute;bottom: 60px;right: calc(50% - 250px)">
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-button type="primary" @click="before">上一步</el-button>
                                </el-col>
                                <el-col :span="12">
                                    <el-button type="primary" @click="next">下一步</el-button>
                                </el-col>
                            </el-row>
                        </div> -->
                    </div>
                    <el-divider />
                    <!--新设备登记第三步表单3-->
                    <div class="registerForms" style="width: 1000px;margin: 0 auto;padding-top: 20px;padding-bottom: 50px">
                        <el-form :inline="true" :model="registerNewDeviceForm3">
                            <!--第一行：增加参数-->
                            <el-row :gutter="24">
                                <el-col :span="24">
                                    <el-button disabled style="font-size: 20px;margin-bottom: 30px;margin-left: 80px; float: left">增加参数</el-button>
                                </el-col>
                            </el-row>
                            <!--第二行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="重量：">
                                        <el-input  v-model="registerNewDeviceForm3.weight" style="width: 200px" placeholder="输入重量" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="额定电压：">
                                        <el-input  v-model="registerNewDeviceForm3.voltage" style="width: 200px" placeholder="输入电压" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第三行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="额定电流：">
                                        <el-input  v-model="registerNewDeviceForm3.current" style="width: 200px" placeholder="输入电流" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="备注：">
                                        <el-input  v-model="registerNewDeviceForm3.remark" style="width: 200px" placeholder="输入备注" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
            
                        <!-- <div style="position: absolute;bottom: 60px;right: calc(50% - 250px)">
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-button type="primary" @click="before">上一步</el-button>
                                </el-col>
                                <el-col :span="12">
                                    <el-button type="primary" @click="next">下一步</el-button>
                                </el-col>
                            </el-row>
                        </div> -->
                    </div>
                    <el-divider />
                    <!--新设备登记第四步表单4-->
                    <div class="registerForms" style="width: 1000px;margin: 0 auto;padding-top: 20px;padding-bottom: 50px">
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <el-tag style="font-size: 20px;margin-bottom: 30px;margin-left: 80px; float: left">添加随机配套设备</el-tag>
                            </el-col>
                        </el-row>
                        <p style="float: left">备注：</p>
                        <el-input  v-model="registerNewDeviceForm4.remark" type="textarea" :rows="5" placeholder="请输入内容" />
            
                        <div style="position: absolute;bottom: 40px;right: calc(50% - 75px)">
                            <el-row :gutter="24">
                                <!-- <el-col :span="12">
                                    <el-button type="primary" @click="before">上一步</el-button>
                                </el-col> -->
                                <el-col :span="12">
                                    <!--              需要再此处添加提价函数-->
                                    <!--              <el-button type="primary"  @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>-->
                                    <el-button type="primary" :loading="loading" @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
                                </el-col>  
                            </el-row>
                        </div>
                    </div>
                </div>
            <!-- </el-drawer> -->
            </el-card>
        </page-main>
    </div>
</template>
<!--  -->
